<template>
          <div>
            <div class="header">
                <img src="https://gw.alicdn.com/imgextra/i4/O1CN019XWXNq1aAPOVMYSiu_!!6000000003289-2-tps-167-63.png" alt="">
                <div class="search" @click="funSea">
                    <input type="text" placeholder="寻找宝贝店铺">
                    <span>搜索</span>
                </div>
                <img src="https://gw.alicdn.com/imgextra/i4/O1CN01ftum4629SHP6bCqTm_!!6000000008066-2-tps-99-99.png" alt="">
            </div>
            <div class="copy"></div>
          </div>

</template>

<script>
export default {
    methods:{
        funSea(){
            this.$router.push("/mysearch")
        }
    }
}
</script>

<style scoped>
.header{
    background: #f4f4f4;
    position: fixed;
    z-index: 999;
    top: 0;
    width: 100%;
    height: .98rem;
    display: flex;
    align-items: center;
    justify-content:space-around;
}
.copy{
    width: 100%;
    height: .98rem;
}
.header>img{
    width:1.11rem;
     height: .42rem;
}
.header .search{
    width: 4.65rem;
    height: .64rem;
    line-height: .64rem;
    display: flex;
    border:.03rem solid #ff5000;
    border-radius: 1rem;
    background-color: #fff;
    position: relative;
}
.search input{
    margin: .2rem 0 .2rem .3rem;
   
}
.search span{
        display: inline-block;
        position: absolute;
        right: 0;
        top:0;
        width: 1.28rem;
        height:.6rem;
        line-height: .6rem;
        border: .02rem solid #fff;
        text-align: center;
        line-height: .64rem;
        font-size: .28rem;
        color: #fff;
        border-radius: .32rem;
        background: linear-gradient(to right, #FF8D0E, #FF5000);
}
.header>img:nth-child(3) {
    width:.66rem;
    height: .66rem;
}
</style>

